<template>
  <div class="customer-wrapper">
    <div class="main-hd">
      <h2>{{$t('m.fēngkòngpèizhì')}}</h2>
    </div>
    <div class="content-wrap">
      <Table :columns="windControlList" :data="windControlData" border></Table>
    </div>

    <div class="main-hd">
      <h2>{{$t('m.huángjīncáiwù')}}</h2>
    </div>
    <div class="content-wrap">
      <Table :columns="goldFinanceList" :data="goldFinanceData"></Table>
    </div>

    <div class="main-hd">
      <h2>{{$t('m.jīshěnguīzé')}}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <table class="table table-hover table-condensed" id="manager_list_table" border>
          <thead>
            <tr>
              <td width="200">{{$t('m.fenkongN')}}</td>
              <td>{{$t('m.cTime')}}</td>
              <td>{{$t('m.uTime')}}</td>
              <td>{{$t('m.pzYz')}}</td>
              <td>{{$t('m.compare')}}</td>
              <td>{{$t('m.remark')}}</td>
              <td width="200">{{$t('m.operate')}}</td>

            </tr>
          </thead>
          <tr v-for="item in risklist">
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td>{{item.utime}}</td>
            <td>{{item.threshold}}</td>
            <td>{{item.comparator}}

            </td>
            <td>{{item.remark}}</td>
            <!--						<td>{{item.ctime | getLocalTime}}</td>-->
            <td>
              <Button type="primary" @click="riskmodal = true, id=item.id, model1=item.comparator, name=item.name, yuzhi=item.threshold, remark= item.remark">{{$t('m.edPz')}}</Button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div>
      <Modal v-model="riskmodal" :title="$t('m.edFk')" @on-ok="ok()" @on-cancel="riskmodal=false">
        <p>
          <label style="width: 100%;font-size: large;">{{$t('m.pzName')}}</label>
          <span class="admin-label">{{$t('m.inYz')}}:</span>
          <Input v-model="yuzhi"></Input>
          <span class="admin-label">{{$t('m.seSymble')}}:</span>
          <i-select v-model="model1">
            <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
          </i-select>
          <span class="admin-label">{{$t('m.inGR')}}:</span>
          <Input v-model="remark">{{remark}}</Input>
        </p>
      </Modal>
      <Modal width="500" v-model="windControlListSort" :title="$t('m.setting')+$t('m.zhíxíngshùnxù')" @on-ok="windControlListSortOk(windControlListSortData,'sort')" @on-cancel="windControlListSortCancel">
        <Select v-model="windControlListSortSelect" style="width:80%;margin:auto;display: block;">
          <Option v-for="(item , index) in windControlData" :value="index+1" :key="index+1">{{ index+1 }}</Option>
        </Select>
      </Modal>
    </div>
  </div>
</template>

<script>
export default {
  name: 'directCustomer',
  data () {
    return {
      windControlList: [
        {
          title: this.$t('m.zhíxíngshùnxù'),
          key: 'weight',
          width: 120,
          align: 'center',
          sortable: true
        },
        {
          title: this.$t('m.fenkongN'),
          key: 'name',
          align: 'center',
        },
        {
          title: this.$t('m.bèizhù'),
          key: 'remark',
          align: 'center',
        },
        {
          title: this.$t('m.jīshěnjùjuékāiguān'),
          align: 'center',
          children: [
            {
              title: this.$t('m.status'),
              align: 'center',
              width: 120,
              render: (h, params) => {
                return h('span', params.row.rejectValue == 0 ? this.$t('m.guānbì') : this.$t('m.kāiqǐ'));
              }
            },
            {
              title: this.$t('m.operate'),
              slot: 'action',
              align: 'center',
              width: 120,
              render: (h, params) => {
                return h('div', [
                  h('i-switch', {
                    props: {
                      type: 'primary',
                      value: params.row.rejectValue == 1
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      'on-change': (value) => {
                        // this.windControlListSortData = { id: params.row.id, name: params.row.name, remark: params.row.remark, value: params.row.value, weight: params.row.weight }
                        this.windControlListSortOk( params.row,'robot-on-off')
                        console.log(params.row,"你是什么___________________")
                      }
                    }
                  })
                ]);
              }
            }
          ]
        },
        {
          title: this.$t('m.zǒngkāiguān'),
          align: 'center',
          children: [
            {
              title: this.$t('m.status'),
              align: 'center',
              width: 120,
              render: (h, params) => {
                const {
                  value
                } = params.row;
                return h('span', value == 0 ? this.$t('m.guānbì') : this.$t('m.kāiqǐ'));
              }
            },
            {
              title: this.$t('m.operate'),
              slot: 'action',
              align: 'center',
              width: 200,
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'success',
                      // size: 'small'
                    },
                    style: {
                      marginRight: '20px'
                    },
                    on: {
                      click: () => {
                        this.windControlListSort = true,
                          this.windControlListSortData = params.row
                      }
                    }
                  }, this.$t('m.páixù')),
                  h('i-switch', {
                    props: {
                      type: 'primary',
                      value: params.row.value == 1
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      'on-change': (value) => {
                        // this.windControlListSortData = { id: params.row.id, name: params.row.name, remark: params.row.remark, value: params.row.value, weight: params.row.weight }
                        this.windControlListSortOk(params.row,'on-off')
                      }
                    }
                  })
                ]);
              }
            }
          ]
        },
      ],
      windControlData: [],
      windControlListSort: false,
      windControlListSortId: "",
      windControlListSortSelect: '',
      windControlSwitch: false,
      resultStatusArr: {},
      goldFinanceList: [
        {
          title: this.$t('m.míngchēng'),
          key: 'name',
          width: 150,
          align: 'center',
          sortable: true
        },
        {
          title: this.$t('m.míngchēng'),
          key: 'remark',
          align: 'center',
          sortable: true
        },
        {
          title: this.$t('m.fǎnhuíjiéguǒbèijùzhuàngtài'),
          align: 'center',
          render: (h, params) => {
            const {
              highValue,
              middleValue,
              lowValue,
              agentValue
            } = params.row;
            let text = (highValue == 1 ? this.$t('m.gāo') : "") + '  ' + (middleValue == 1 ? this.$t('m.zhōng') : "") + '  ' + (lowValue == 1 ? this.$t('m.dī') : "") + '  ' + (agentValue == 1 ? this.$t('m.yísìzhōngjiè') : "")
            return h('span', text);
          }
        },
        {
          title: this.$t('m.gāo'),
          slot: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('i-switch', {
                props: {
                  type: 'primary',
                  value: params.row.highValue == 1
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  'on-change': (value) => {
                    this.goldFinanceListChange({ id: params.row.id, name: params.row.name, remark: params.row.remark, highValue: params.row.highValue == 1 ? 0 : 1, middleValue: params.row.middleValue, lowValue: params.row.lowValue, agentValue: params.row.agentValue })
                  }
                }
              })
            ]);
          }
        },
        {
          title: this.$t('m.zhōng'),
          slot: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('i-switch', {
                props: {
                  type: 'primary',
                  value: params.row.middleValue == 1
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  'on-change': (value) => {
                    this.goldFinanceListChange({ id: params.row.id, name: params.row.name, remark: params.row.remark, highValue: params.row.highValue, middleValue: params.row.middleValue == 1 ? 0 : 1, lowValue: params.row.lowValue, agentValue: params.row.agentValue })
                  }
                }
              })
            ]);
          }
        },
        {
          title: this.$t('m.dī'),
          slot: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('i-switch', {
                props: {
                  type: 'primary',
                  value: params.row.lowValue == 1
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  'on-change': (value) => {
                    this.goldFinanceListChange({ id: params.row.id, name: params.row.name, remark: params.row.remark, highValue: params.row.highValue, middleValue: params.row.middleValue, lowValue: params.row.lowValue == 1 ? 0 : 1, agentValue: params.row.agentValue })
                  }
                }
              })
            ]);
          }
        },
        {
          title: this.$t('m.yísìzhōngjiè'),
          slot: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('i-switch', {
                props: {
                  type: 'primary',
                  value: params.row.agentValue == 1
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  'on-change': (value) => {
                    this.goldFinanceListChange({ id: params.row.id, name: params.row.name, remark: params.row.remark, highValue: params.row.highValue, middleValue: params.row.middleValue, lowValue: params.row.lowValue, agentValue: params.row.agentValue == 1 ? 0 : 1 })
                  }
                }
              })
            ]);
          }
        }
      ],
      goldFinanceData: [],
      windControl: [],
      riskmodal: false,
      risklist: [],
      yuzhi: '',
      remark: '',
      cityList: [
        {
          value: '<',
          label: '<'
        },
        {
          value: '>',
          label: '>'
        },
        {
          value: '<=',
          label: '<='
        },
        {
          value: '>=',
          label: '>='
        },
        {
          value: '!=',
          label: '!='
        },
      ],
      model1: ''

    }
  },

  created () {
    this.getRiskRuleList();
    this.getWindControl();
    this.getGoldFinance()
  },

  methods: {

    goldFinanceListChange (ogj) {
      var url1 = '/api/laocai/sys/goldfinance/config/update'
      this.$http.post(url1, ogj).then((res) => {
        if (res.body.code == 0) {
        } else {
        }
        this.getGoldFinance()
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      })
    },

    windControlSwitchhange () {

    },
    windControlListSortOk (v,type) {
      var url = '/api/laocai/sys/risk/config/update'
      let {ctime,utime,_index,_rowKey,...value} = v
      // let windControlListSortData = this.windControlListSortData
      if (type == "on-off") {
        value.value = value.value == 1 ? 0 : 1
      } 
      if (type == "sort") {
        value.weight = this.windControlListSortSelect        
      }
      if (type=="robot-on-off") {
        value.rejectValue = value.rejectValue== 1 ? 0 : 1
      }
      console.log(value,"参数")
      this.$http.post(url, value).then((res) => {
        if (res.body.code == 0) {
        } else {
        }
        this.getWindControl()
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      })
    },
    windControlListSortCancel () {
      this.windControlListSort = false,
        this.windControlListSortId = "",
        this.windControlListSortSelect = ''
    },

    ok () {
      this.$http.post('/api/laocai/sys/risk-rule/update', {
        id: this.id,
        threshold: this.yuzhi,
        comparator: this.model1,
        remark: this.remark,
      }).then((res) => {
        if (res.body.code == 0) {
          this.getRiskRuleList()
        } else {
        }

        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      })
    },
    // 获取机审配置列表
    getRiskRuleList () {
      var url1 = '/api/laocai/sys/risk-rule/list'
      this.$http.get(url1).then((res) => {
        if (res.body.code == 0) {
          this.risklist = res.body.result
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },

    // 获取风控配置列表
    getWindControl () {
      var url1 = '/api/laocai/sys/risk/config/list'
      this.$http.get(url1).then((res) => {
        if (res.body.code == 0) {
          this.windControlData = res.body.result
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
    // 获取黄金财务配置列表
    getGoldFinance () {
      var url1 = '/api/laocai/sys/goldfinance/config/list'
      this.$http.get(url1).then((res) => {
        if (res.body.code == 0) {
          this.goldFinanceData = res.body.result
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
  },

  watch: {

  },
}
</script>

<style lang="scss" scoped>
h2{    
  margin-top: 15px;
  font-size: 16px;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222;
    line-height: 20px;
    height: 20px;
    padding-left: 8px;
    display: inline-block;
    margin-bottom: 20px;
    background: linear-gradient(to right, #2d8cf0 0%, #2d8cf0 3px, #f9f9f9 3px, #f9f9f9 100%);
}
.handle-filter {
  display: flex;
  justify-content: space-between;
}

.iview-select {
  width: 200px;
}

.customer-wrapper {
  padding: 15px;
}

.customer-main {
  margin-top: 15px;
}
</style>
